@import "../imports/mixins";

.jw-skin-seven {

  @accent-color: #FFF;
  @inactive-color: #cecece;

  @controlbar-background: rgba(33, 33, 33, 0.8);

  @controlbar-height: 2.5em;

  #namespace > .set-global-color-classes();

  .jw-active-option {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .jw-display-icon-container {
    display: table;
    font-size: 20px;
    border-radius: 3.5em;

    &:hover {
      .jw-icon {
        color: @accent-color;
      }
    }
  }

  .jw-display-icon-container > .jw-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.7em;
  }

  &.jw-state-idle .jw-display-icon-container > .jw-icon {
    // improve alignment of play icon (should be done in font)
    padding-left: 4px;
  }

  .jw-dock-button {
    border-radius: 2.5em;
  }

  .jw-menu {
      padding: 0;
    }

  .jw-dock {
    .jw-overlay {
      border-radius: @ui-padding;
    }
  }
  .jw-skip {
    border-radius: @ui-padding;
  }

  .jw-text {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  &.jw-breakpoint-0 .jw-display-icon-container .jw-icon {
    font-size: (@mobile-touch-target / 2);
  }

  &.jw-breakpoint-1 .jw-display-icon-container .jw-icon {
    font-size: (@mobile-touch-target / 1.25);
  }

}
